import React from 'react';

import { useSelector, useDispatch } from 'react-redux'
import { RootState } from '../../store/store'
import { increment, decrement, increAsync } from '../../store/appSlice';


import {
  Switch,
  Route,
  Link,
  HashRouter
} from "react-router-dom";

function App() {

  const app = useSelector((state) => state.app)
  const dispatch = useDispatch()

  const setCountAdd = function () {
    dispatch(increment(5));
  }

  const setCountReduce = function () {
    dispatch(decrement())
  }

  const asyncCoop = async function () {
    await dispatch(increAsync())
    console.log('done')
  }

  return (
    <div className="App">
      <Link to="/demo">Demo</Link>
      <br />
      <br/>
      <Link to="/creator">Creator</Link>
      <br/>
      <br/>
      <Link to="/">Index</Link>
      <br/>
      <br/>
      <Link to="/dnd">dnd</Link>
      <br/>
      <br/>
      <Link to="/dnd_kit">dndKit</Link>
      <br/>
      <br/>
      <Link to="/sortablejs">sortablejs</Link>
      <br/>
      <br/>
      <h1>{app.count}</h1>
      <h1>{app.loading ? 'loading...' : ''}</h1>
      <button onClick={setCountAdd}>点击+5</button>
      <button onClick={setCountReduce}>点击-5</button>
      <button onClick={asyncCoop}>asyncCoop-5</button>
    </div>
  );
}

export default App;
